<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
      <el-form-item label="班长姓名" prop="registerName">
        <el-input
          v-model="queryParams.registerName"
          placeholder="请输入班长姓名"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="供应商名称" prop="customerName" label-width="100px">
        <el-input
          v-model="queryParams.customerName"
          placeholder="请输入供应商名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="车头号码" prop="carHeadNum">
        <el-input
          v-model="queryParams.carHeadNum"
          placeholder="请输入车头号码"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="车身号码" prop="carBodyNum" label-width="100px">
        <el-input
          v-model="queryParams.carBodyNum"
          placeholder="请输入车身号码"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="充装时间" prop="registerTime">
        <el-date-picker clearable
                        v-model="queryParams.registerTime"
                        type="datetime"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        placeholder="请选择充装开始时间">
        </el-date-picker>
        <el-date-picker clearable
                        v-model="queryParams.confirmTime"
                        type="datetime"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        placeholder="请选择充装结束时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>

    </el-form>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" v-hasPermi="['business:report:export']">
          导出
        </el-button>
      </el-col>
    </el-row>

    <el-table
      v-loading="loading"
      :data="list"
      style="width: 100%;"
      border>
<!--      :show-summary="true" :summary-method="getSummaries"-->
      <el-table-column label="序号" type="index" align="center">
        <template slot-scope="scope">
          <span v-if="(pageNum - 1) * pageSize + scope.$index + 1 <= total">{{ (pageNum - 1) * pageSize + scope.$index + 1  }}</span>
          <span v-else>总计</span>
        </template>
      </el-table-column>
      <el-table-column label="班长姓名" align="center" prop="registerName" :show-overflow-tooltip="true" />
      <el-table-column label="到站地点" align="center" prop="stationLocation" :show-overflow-tooltip="true" />
<!--      <el-table-column label="付款日期" align="center" prop="deptName"  width="180">-->
<!--        <template slot-scope="scope">-->
<!--          <span>{{ parseTime(scope.row.loginTime) }}</span>-->
<!--        </template>-->
<!--      </el-table-column>-->
<!--      <el-table-column label="德嘉汇款金额" align="center" prop="ipaddr" :show-overflow-tooltip="true" />-->
<!--      <el-table-column label="保证金" align="center" prop="loginLocation" :show-overflow-tooltip="true" />-->
      <el-table-column label="充气编号" align="center" prop="fullfillNum" :show-overflow-tooltip="true" />
      <el-table-column label="经销商" align="center" prop="customerName" :show-overflow-tooltip="true" />
      <el-table-column label="车头号码" align="center" prop="carHeadNum" :show-overflow-tooltip="true" />
      <el-table-column label="挂车号码" align="center" prop="carBodyNum" :show-overflow-tooltip="true" />
      <el-table-column label="充气量（m³）" align="center" prop="fullfillAmount" />
      <el-table-column label="站内小时" align="center" prop="stationHours" :show-overflow-tooltip="true" />

<!--      <el-table-column label="进气价格" align="center" prop="os" />-->
<!--      <el-table-column label="中海油余额" align="center" prop="ipaddr" :show-overflow-tooltip="true" />-->
      <el-table-column label="登记时间" align="center" prop="registerTime"  width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.registerTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="进站时间" align="center" prop="confirmTime"  width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.confirmTime) }}</span>
        </template>
      </el-table-column>

      <el-table-column label="充装完时间" align="center" prop="recordTime"  width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.recordTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="出站时间" align="center" prop="getOutTime"  width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.getOutTime) }}</span>
        </template>
      </el-table-column>
<!--      <el-table-column label="单机" align="center" prop="tokenId" :show-overflow-tooltip="true" />-->
<!--      <el-table-column label="双机" align="center" prop="tokenId" :show-overflow-tooltip="true" />-->
<!--      <el-table-column label="车次排列" align="center" prop="tokenId" :show-overflow-tooltip="true" />-->
<!--      <el-table-column label="充装排序" align="center" prop="tokenId" :show-overflow-tooltip="true" />-->
<!--      <el-table-column label="德嘉收款单位" align="center" prop="tokenId" :show-overflow-tooltip="true" />-->
<!--      <el-table-column label="收款时间" align="center" prop="deptName"  width="180">-->
<!--        <template slot-scope="scope">-->
<!--          <span>{{ parseTime(scope.row.loginTime) }}</span>-->
<!--        </template>-->
<!--      </el-table-column>-->
<!--      <el-table-column label="收款单位" align="center" prop="tokenId" :show-overflow-tooltip="true" />-->
<!--      <el-table-column label="金额" align="center" prop="tokenId" :show-overflow-tooltip="true" />-->
<!--      <el-table-column label="保证金" align="center" prop="tokenId" :show-overflow-tooltip="true" />-->
<!--      <el-table-column label="销售气量（m³）" align="center" prop="tokenId" :show-overflow-tooltip="true" />-->
<!--      <el-table-column label="销售价格" align="center" prop="tokenId" :show-overflow-tooltip="true" />-->
<!--      <el-table-column label="中海油余额" align="center" prop="tokenId" :show-overflow-tooltip="true" />-->
<!--      <el-table-column label="司机联系人" align="center" prop="tokenId" :show-overflow-tooltip="true" />-->
<!--      <el-table-column label="电话" align="center" prop="tokenId" :show-overflow-tooltip="true" />-->
<!--      <el-table-column label="中海油单位" align="center" prop="tokenId" :show-overflow-tooltip="true" />-->
<!--      <el-table-column label="辽宁泰普能源有限公司单位" align="center" prop="tokenId" :show-overflow-tooltip="true" />-->
<!--      <el-table-column label="充气量（m³）" align="center" prop="tokenId" :show-overflow-tooltip="true" />-->
<!--      <el-table-column label="单价（元）" align="center" prop="tokenId" :show-overflow-tooltip="true" />-->
<!--      <el-table-column label="充气金额（元)" align="center" prop="tokenId" :show-overflow-tooltip="true" />-->
<!--      <el-table-column label="电汇（元）" align="center" prop="tokenId" :show-overflow-tooltip="true" />-->
<!--      <el-table-column label="汇票（元）" align="center" prop="tokenId" :show-overflow-tooltip="true" />-->
<!--      <el-table-column label="气款余额（元）" align="center" prop="tokenId" :show-overflow-tooltip="true" />-->
<!--      <el-table-column label="付气款单位" align="center" prop="tokenId" :show-overflow-tooltip="true" />-->
<!--      <el-table-column label="销售气量（m³）" align="center" prop="tokenId" :show-overflow-tooltip="true" />-->
<!--      <el-table-column label="销售单价（元)" align="center" prop="tokenId" :show-overflow-tooltip="true" />-->
<!--      <el-table-column label="销售金额（元)" align="center" prop="tokenId" :show-overflow-tooltip="true" />-->
<!--      <el-table-column label="已结算" align="center" prop="tokenId" :show-overflow-tooltip="true" />-->
<!--      <el-table-column label="未结算" align="center" prop="tokenId" :show-overflow-tooltip="true" />-->
<!--      <el-table-column label="电汇" align="center" prop="tokenId" :show-overflow-tooltip="true" />-->
<!--      <el-table-column label="汇票" align="center" prop="tokenId" :show-overflow-tooltip="true" />-->
<!--      <el-table-column label="气款余额（元）" align="center" prop="tokenId" :show-overflow-tooltip="true" />-->
<!--      <el-table-column label="车次" align="center" prop="tokenId" :show-overflow-tooltip="true" />-->
<!--      <el-table-column label="往返公里" align="center" prop="tokenId" :show-overflow-tooltip="true" />-->
<!--      <el-table-column label="车头耗气量" align="center" prop="tokenId" :show-overflow-tooltip="true" />-->
<!--      <el-table-column label="单价" align="center" prop="tokenId" :show-overflow-tooltip="true" />-->
<!--      <el-table-column label="耗气金额" align="center" prop="tokenId" :show-overflow-tooltip="true" />-->
<!--      <el-table-column label="高速公路费" align="center" prop="tokenId" :show-overflow-tooltip="true" />-->
<!--      <el-table-column label="司机工资" align="center" prop="tokenId" :show-overflow-tooltip="true" />-->
<!--      <el-table-column label="押运员工资" align="center" prop="tokenId" :show-overflow-tooltip="true" />-->
<!--      <el-table-column label="其他" align="center" prop="tokenId" :show-overflow-tooltip="true" />-->
<!--      <el-table-column label="费用金额" align="center" prop="tokenId" :show-overflow-tooltip="true" />-->
<!--      <el-table-column label="亏涨量（m³）" align="center" prop="tokenId" :show-overflow-tooltip="true" />-->
<!--      <el-table-column label="备注" align="center" prop="tokenId" :show-overflow-tooltip="true" />-->

<!--      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">-->
<!--        <template slot-scope="scope">-->
<!--          <el-button-->
<!--            size="mini"-->
<!--            type="text"-->
<!--            icon="el-icon-delete"-->
<!--            @click="handleForceLogout(scope.row)"-->
<!--            v-hasPermi="['monitor:online:forceLogout']"-->
<!--          >强退</el-button>-->
<!--        </template>-->
<!--      </el-table-column>-->
    </el-table>

<!--    <pagination v-show="total>0" :total="total" :page.sync="pageNum" :limit.sync="pageSize" />-->
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="pageNum"
      :limit.sync="pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import { listBusinessReport, listAll } from "@/api/report/report";
import * as math from 'mathjs'

export default {
  name: "Online",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 总条数
      total: 0,
      // 表格数据
      list: [],
      pageNum: 1,
      pageSize: 10,
      // 查询参数
      queryParams: {
        registerName: null,
        customerName: null,
        carHeadNum: null,
        carBodyNum: null,
        registerTime: null,
        confirmTime: null
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询列表 */
    getList() {
      this.loading = true;
      this.queryParams.pageNum = this.pageNum
      this.queryParams.pageSize = this.pageSize
      listBusinessReport(this.queryParams).then(response => {
        this.list = response.rows;
        this.total = response.total;
        this.loading = false;
        if(this.pageSize > response.rows.length || this.pageNum * this.pageSize == response.total) {
          var total = {}
          const query = { ...this.queryParams }
          Reflect.deleteProperty(query, 'pageNum')
          Reflect.deleteProperty(query, 'pageSize')
          listAll(query).then(response => {
            var prev = math.bignumber(0)
            response.forEach(function(item, index) {
              const value = Number(item.fullfillAmount);
              if (!isNaN(value)) {
                prev = math.add(prev, value)
              }
            })
            total.fullfillAmount = math.number(prev)
            this.list.push(total)
          });
        } else {
          var total = {}
          var prev = math.bignumber(0)
          response.rows.forEach(function(item, index) {
            const value = Number(item.fullfillAmount);
            if (!isNaN(value)) {
              prev = math.add(prev, value)
            }
          })
          total.registerName = '本页小计'
          total.fullfillAmount = math.number(prev)
          this.list.push(total)
        }
      });
    },
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      //第一列命名合计
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计';
          return;
        }
        const values = data.map(item => Number(item[column.property]));
        //指定allCompanyNum、allCarNum、allDriverNum不求和，其余列军求和
        if (column.property === 'fullfillAmount') {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[index];
        }else{
          sums[index] = ''
        }
      });
      return sums
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    handleExport() {
      this.download('business/report/export', {
        ...this.queryParams
      }, `business_report_${new Date().getTime()}.xlsx`)
    }
  }
};
</script>

